<template>
  <div class="register">
    <div class="r_window animate__animated animate__bounceInRight">
      <p>用户注册</p>
      <el-input
        placeholder="请输入4-16位账号"
        v-model="reg_name"
        clearable
      ></el-input>
      <p class="zsg">{{ zsg }}</p>
      <el-input
        placeholder="请输入密码"
        v-model="reg_psd"
        show-password
      ></el-input>
      <p class="psg">{{ psg }}</p>
      <el-input
        placeholder="请确认密码"
        v-model="reg_confirm_psd"
        show-password
      ></el-input>
      <p class="msg">{{ msg }}</p>
      <el-button type="primary" @click="pdd">注册</el-button>
      <p class="p1">
        <span @click="cdd">返回登录</span>
      </p>
    </div>
  </div>
</template>

<script>
import watch from "./ui/watch";
let Tips_name = "用户名格式输入正确";
let Tips_psd = "密码格式正确";
export default {
  data() {
    return {
      // 输入用户名
      reg_name: "",
      // 输入密码
      reg_psd: "",
      // 确认密码
      reg_confirm_psd: "",

      zsg: "请输入4到16位不包含特殊符号的用户名",
      psg: "密码大于6位并且包含大小写数字和特殊字符",
      msg: "",
    };
  },
  watch: watch,
  mounted() {},

  methods: {
    pdd() {
      if (Tips_name === this.zsg && Tips_psd === this.psg) {
        if (this.reg_psd == this.reg_confirm_psd) {
          this.$axios
            .post("http://10.0.31.157:8888/zheng", {
              name: this.reg_name,
              password: this.reg_psd,
            })
            .then((res) => {
              if (res) {
                this.$router.push('./login')
              }else{
                this.$message('注册失败');
              }
            });
        } else {
          alert("密码不一致");
          this.reg_name = "";
          this.reg_psd = "";
          this.reg_confirm_psd = "";
        }
      } else {
        alert("请输入格式正确的用户名或密码");
        this.reg_name = "";
        this.reg_psd = "";
        this.reg_confirm_psd = "";
      }
    },
    cdd() {
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style lang="scss" scoped>
.register {
  background: url("../../assets/img/login_img3.png") no-repeat;
  background-size: 100% 100%;
  background-color: aqua;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top:0px;
  left: 0px;
  .r_window {
    width: 600px;
    height: 700px;
    background-color: cornflowerblue;
    border-radius: 20px;
    //   margin: 0 auto;
    position: fixed;
    left: 50%;
    margin-left: -300px;
    top: 8%;
    overflow: hidden;
    background: url("../../assets/img/window_img5.jpg") no-repeat center center;
    background-size: 100% 100%;
    .el-input {
      width: 500px;
      line-height: 80px !important;
      //    display: block;
    }
    .el-button {
      width: 200px;
      height: 60px;
      border-radius: 15px;
    }
    .zsg,
    .psg,
    .msg {
      width: 100%;
      line-height: 20px;
      height: 20px;
      color: brown;
    }
    .p1 {
      span {
        &:hover {
          color: blue;
          text-decoration: underline 1px solid blue;
          cursor: pointer;
        }
      }
    }
  }
}
</style>